<template>
    <div>
        <!----------------------- 公告 ------------------------>
        <div class="bg-gray-300 p-4 rounded-lg shadow-md flex flex-col">
            <div class="text-lg font-bold mb-2 flex justify-center">公告</div>
            <ul class=" text-gray-600 mb-1  p-1" v-for="item in informItems">
                <li @click="InformBtn(item.id)" class="hover:text-blue-600 hover:underline cursor-pointer"
                    v-html="item.title"></li>
            </ul>
            <button @click="InformBtn('0')"
                class="mt-2 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">添加公告</button>
        </div>
        <!--  -->
        <h1 class="h-64">应该有的功能 发布公告，并且公告要支持html预览</h1>
        <h1 class="h-64">申请账号密码</h1>
        <h1 class="h-64">更改账号密码</h1>
    </div>

    <!----------------------------------------------- 公告对话框样式 -------------------------------------->
    <el-dialog v-model="showInformDialog" width="auto" class="max-w-4xl mx-auto">
        <template #footer>
            <div class="bg-white dark:bg-gray-800  p-6 rounded-lg shadow-lg mb-4">
                <div class="text-lg font-bold text-gray-800 dark:text-white mb-4 text-center"
                    v-html="currentInform.title">
                </div>
                <div class="text-gray-600 dark:text-gray-300 text-sm text-center" v-html="currentInform.content"></div>
            </div>
            <!-- 编辑区域 -->
            <div class="flex flex-col ">
                <!-- 公告标题编辑 -->
                <div class="mb-4">
                    <el-input placeholder="公告的标题 支持html" v-model="currentInform.title" type="textarea"
                        rows="3"></el-input>
                </div>
                <!-- 公告内容编辑 -->
                <div class="mb-2">
                    <el-input placeholder="公告的内容 支持html" v-model="currentInform.content" type="textarea"
                        rows="5"></el-input>
                </div>

                <div class="flex">
                    <span class="pr-4">主页是否弹出 ：</span>
                    <el-switch v-model="currentInform.isPop" />
                </div>

                <div>
                    <!-- 点击这个按钮应该发送请求 id=0是添加公告 否则是修改公告 -->
                    <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">保存公告</button>
                </div>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';



//  --------------------------------------------------- 公告相关js ----------------------------------------------
const showInformDialog = ref(false)
// 点击了编辑公告或者添加公告 传过来一个id
function InformBtn(id: string) {
    console.log("id=", id);

    if (id.trim() == '0') { //等于0表示是添加公告 所有内容置空
        currentInform.value.id = ''
        currentInform.value.title = ''
        currentInform.value.content = ''
    } else {//通过id拿到内容并赋值
        informItems.value.forEach((element) => {
            if (element.id === id) {
                currentInform.value.id = element.id;
                currentInform.value.title = element.title;
                currentInform.value.content = element.content;
            }
        });
    }

    showInformDialog.value = true
}
let currentInform = ref({//当前选中的公告内容
    id: '0',
    title: "",
    content: '',
    isPop: 0,
})
let informItems = ref([{
    id: '1',
    title: "23min分钟前有人发了一篇文章6666666666666666666666623min分钟前有人发了一篇文章66666666666666666666666",
    content: '这是我的第一篇博客文章。欢迎大家的访问！',
}, {
    id: '2',
    title: "今日访客+1",
    content: '这是我的第一篇博客文章。欢迎大家的访问！',
}])
</script>

<style scoped></style>